<template>
	<view>
		<view class="m-t-20 p-r-20 p-l-20">
		<view class="route-content p20">
			<view class="p20 add-content">
				<view class="start-content flex">
					<!-- <view class="start-icon xs flex-content">
						装
					</view> -->
					<image class="fa-icon" src="../../../static/images/fa.png" mode=""></image>
					<view class="m-l-34 " style="width: 600rpx;" placeholder="输入装货地址">
						<u-input v-model="startvalue.name" :clearable="false" @click="OpenMap(1)" />
					</view>
					
				</view>
				<view class="flex">
					<view style="width: 32rpx;" class=" m-r-34 m-l-8" @click="changplace">
						<image style="width: 100%;" src="../../static/riLine-repeatline.png" mode="widthFix"></image>
					</view>
					<u-line color="#BBBBBB" :hair-line="false"/>
				</view>
				<view class="end-content m-t-5 flex">
					<!-- <view class="end-icon xs flex-content">
						卸
					</view> -->
					<image class="shou-icon" src="../../../static/images/shou.png" mode=""></image>
					<view class="m-l-34 "  style="width: 600rpx;" >
						<u-input v-model="endvalue.name" :clearable="false" @click="OpenMap(2)" placeholder="输入卸货地址" />
					</view>
				</view>
			</view>
	
		</view>
		</view>
		<view class="p-l-20 p-r-20 m-t-20" >
			<view class="bg-white flex essential-information" >
				<view style="width: 10rpx; height: 50rpx;background-color: #dd6161;border-radius: 20rpx;margin-left: 30rpx; ">
					
				</view>
				<view  style="font-size: 40rpx; font-weight: 600; margin-left: 10rpx;">
					个人信息
				</view>
			</view>
			<view class="bg-white">
				<u-cell-group>
					<u-cell-item  title="姓名"  hover-class="none" :arrow="false">
						<view class="" slot="right-icon">
							<input type="text"  v-model="info.user_name" placeholder="请输入你的姓名" />
						</view>
					</u-cell-item>
					<u-cell-item  title="手机电话"  hover-class="none" :arrow="false">
						<view class="" slot="right-icon">
							<input type="text"  v-model="info.mobile" placeholder="请输入你的电话" />
						</view>
					</u-cell-item>
						</u-cell-group>
			</view>
		</view>
		
		<view class="affirm-content bg-white p-l-20 p-t-34 p-b-36 p-r-20">
			
			<view v-if="id==''" class="affirm-btn  flex-content" @click="addroute">
				确认添加
			</view>
		   <view v-else class="affirm-btn  flex-content" @click="editrouteInfo">
		   	确认修改
		   </view>
		</view>
	</view>
</template>

<script>
	
	import {addRoute,editRouteInfo,getRouteInfo} from "@/api/car"
	import GDMap  from '@/js_sdk/amap-wx/amap-wx.130'
	export default {
		data() {
			return {
				startvalue:{
					name:""
				},
				endvalue:{
					name:""
				},
				info:{
					user_name:"",
					mobile:""
				},
				id:"",
				mapgd:""
			}
		},
		created() {
			this.mapgd= new GDMap.AMapWX({key:'364c1096e6b21c6e94ffaf5cc02e4d08'});
			this.getUserLocation();
			
		},
		async onLoad(option) {
			console.log(option);
			console.log(option);
			if(option.itemid){
			this.id=option.itemid
			let res=await getRouteInfo({
				id:option.itemid
			})
			this.info.mobile=res.data.mobile
			this.info.user_name=res.data.user_name
			this.startvalue.latitude=res.data.addressVal[0].start_latitude
			this.startvalue.longitude=res.data.addressVal[0].start_longitude
			this.startvalue.name=res.data.addressVal[0].start_address
			this.startvalue.province=res.data.addressVal[0].start_province
		    this.startvalue.city=res.data.addressVal[0].start_city
			this.startvalue.district=res.data.addressVal[0].start_district
			this.endvalue.latitude=res.data.addressVal[0].end_latitude
			this.endvalue.longitude=res.data.addressVal[0].end_longitude
			this.endvalue.name=res.data.addressVal[0].end_address
			this.endvalue.province=res.data.addressVal[0].end_province
			this.endvalue.city=res.data.addressVal[0].end_city
			this.endvalue.district=res.data.addressVal[0].end_district
			}
		},
		methods: {
		async editrouteInfo(){
			if(this.startvalue.name==""||this.endvalue.name==""){
				return this.$toast({
					title:"请选择位置"
				})
			}
			if(this.info.mobile==""){
				return this.$toast({
					title:"请输入手机号"
				})
			}
			if(this.info.user_name==""){
				return this.$toast({
					title:"请输您的名字"
				})
			}
			
			let transport_address=[]
			transport_address.push( {
				start_latitude:this.startvalue.latitude,
				start_longitude:this.startvalue.longitude,
				start_address:this.startvalue.name,
				start_province:this.startvalue.province,
				start_city:this.startvalue.city,
				start_district:this.startvalue.district,
				end_latitude:this.endvalue.latitude,
				end_longitude:this.endvalue.longitude,
				end_address:this.endvalue.name,
				end_province:this.endvalue.province,
				end_city:this.endvalue.city,
				end_district:this.endvalue.district,
				type:1
			})
			
						
			let {user_name,mobile}=this.info
			let requestData={
				id:this.id,
				user_name,
				mobile,
				transport_address:JSON.stringify(transport_address)
			}
			let res=await editRouteInfo(requestData)
			if(res.code==1){
				uni.navigateBack({
					
				})
			}
		},
		async	addroute(){
				if(this.startvalue.name==""||this.endvalue.name==""){
					return this.$toast({
						title:"请选择位置"
					})
				}
				if(this.info.mobile==""){
					return this.$toast({
						title:"请输入手机号"
					})
				}
				if(this.info.user_name==""){
					return this.$toast({
						title:"请输您的名字"
					})
				}
				
				let transport_address=[]
				transport_address.push( {
					start_latitude:this.startvalue.latitude,
					start_longitude:this.startvalue.longitude,
					start_address:this.startvalue.name,
					start_province:this.startvalue.province,
					start_city:this.startvalue.city,
					start_district:this.startvalue.district,
					end_latitude:this.endvalue.latitude,
					end_longitude:this.endvalue.longitude,
					end_address:this.endvalue.name,
					end_province:this.endvalue.province,
					end_city:this.endvalue.city,
					end_district:this.endvalue.district,
					type:1
				})
				
			
				let {user_name,mobile}=this.info
				let requestData={
					user_name,
					mobile,
					transport_address:JSON.stringify(transport_address)
				}
				 
				let res=await addRoute(requestData)
				if(res.code==1){
					uni.navigateBack({
						
					})
				}
			},
			changplace(){
				let change=this.startvalue
				this.startvalue=this.endvalue
				this.endvalue=change
			},
			OpenMap(index){
				//打开地图选择地点回调
				
				if(index==1){
					uni.chooseLocation({
						success:res=>{
							this.startvalue.name=res.name
							this.startvalue.longitude = res.longitude;
							this.startvalue.latitude = res.latitude;
							
							this.chooseMap(res.longitude,res.latitude,index)
							this.$forceUpdate();
						}
					})
				}else{
					uni.chooseLocation({
						success:res=>{
							this.endvalue.name=res.name
							this.endvalue.longitude = res.longitude;
							this.endvalue.latitude = res.latitude;
							this.chooseMap(res.longitude,res.latitude,index)
						}
					})
				}
			
			},
			async chooseMap(longitude,latitude,index){
				
				const data =  await this.succMap(longitude,latitude);
				if(index==1){
					this.startvalue.province = data[0].regeocodeData.addressComponent.province;
					this.startvalue.city = data[0].regeocodeData.addressComponent.city.length==0? '直辖市':data[0].regeocodeData.addressComponent.city;
					this.startvalue.district = data[0].regeocodeData.addressComponent.district;
				}else{
					this.endvalue.province = data[0].regeocodeData.addressComponent.province;
					this.endvalue.city = data[0].regeocodeData.addressComponent.city.length==0? '直辖市':data[0].regeocodeData.addressComponent.city;
					this.endvalue.district = data[0].regeocodeData.addressComponent.district;
				}
				console.log(this.startvalue);
				this.$forceUpdate();
			},
			succMap(longitude,latitude){
				//输入经纬度获取地区名字地址
				return new Promise((resolve, reject)=>{
					this.mapgd.getRegeo({
						 location:`${longitude},${latitude}`,
						 success:res=>{
							resolve(res);
						 },
						 fail:err=>{
							 reject(err)
							 console.log(err);
							 console.log('未识别到用户位置')
						 }
					})
				})
			},
			async initMap(longitude,latitude){
				const data =  await this.succMap(longitude,latitude);
				
				console.log(data)
				let city = data[0].regeocodeData.addressComponent.city
		
						this.startvalue.latitude =data[0].latitude,
					this.startvalue.longitude=data[0].longitude,
					this.startvalue.province=data[0].regeocodeData.addressComponent.province
					this.startvalue.city= data[0].regeocodeData.addressComponent.city.length==0? '直辖市':data[0].regeocodeData.addressComponent.city
				this.startvalue.district=data[0].regeocodeData.addressComponent.district
				this.startvalue.name=data[0].desc || '输入起始地址'
				
					
				},
			getUserLocation(){
				
				uni.getLocation({
					type: 'gcj02',
					 success:res=>{
						var latitude = res.latitude
						var longitude = res.longitude
						this.initMap(longitude,latitude)
						
					},
					fail:err=>{
						console.log('用户未开启授权');
						uni.navigateTo({
							url:'/pages/area_list/area_list?unAddress=1'
						})	
						
					}
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.essential-information{
		height: 170rpx;
		display: flex;
		background-color: #FFFFFF;
		align-items: center;
	}
.affirm-content{
	height: 160rpx;
	position: fixed;
	bottom: 0px;
	width: 100%;
	background-color: #FFFFFF;
}
.affirm-btn{
	height: 88rpx;
	background-color:#EE6841 ;
	width: 100%;
	
	color: #FFFFFF;
	border-radius: 12rpx;
}
.end-icon{
	background-color: #EE6841;
	color: #FFFFFF;
	width: 48rpx;
	height: 48rpx;
	border-radius: 30rpx;
}
.route-content{
	border-radius: 20rpx;
	background-color: #FFFFFF;
}
.add-content{
	border-radius: 20rpx;
	background-color: #F7F3F3;
}
.start-icon{
	background-color: #191919;
	color: #FFFFFF;
	width: 48rpx;
	height: 48rpx;
	border-radius: 30rpx;
}
.fa-icon {
	height:40rpx;
	width:40rpx;
}
.shou-icon{
	height:40rpx;
	width:40rpx;
}
</style>
